
<template>
  <div class="wrap">
        <el-button class="add-btn fr" icon="el-icon-edit" @click="addConfig">添加配置</el-button>

    <el-table
      class="table"
      border fit highlight-current-row
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column
          align="center"
          type="index"
          label="编号"
          width="50">
      </el-table-column>
      <el-table-column
          align="center"
          prop="showArea"
          label="配置位置">
      </el-table-column>
      <el-table-column
          align="center"
          prop="showAreaName"
          label="位置名称">
      </el-table-column>
      <el-table-column
          align="center"
          width="100"
          label="是否开启">
           <template slot-scope="scope">
            <p>{{statusMapping[scope.row.isShow + '']}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          width="200"
          label="时间">
          <template slot-scope="scope">
            {{_mapping.date_format(scope.row.createTime)}}
          </template>
      </el-table-column>
        <el-table-column
        width="250"
        align="center"
        label="操作">
        <template slot-scope="scope">
            <el-button size="small" @click="modifyConfig(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

 <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%" class="dialog">
      <el-row class="line">
        <el-col>
          <span class="label"><span class="red">*</span>配置位置</span>
          <el-input placeholder="请输入配置位置" style="width: 250px;" v-model="addData.showArea"></el-input>
        </el-col>
      </el-row>

       <el-row class="line">
        <el-col>
          <span class="label"><span class="red">*</span>位置名称</span>
          <el-input placeholder="请输入位置名称" style="width: 250px;" v-model="addData.showAreaName"></el-input>
        </el-col>
      </el-row>

       <el-row class="line">
        <el-col>
          <span class="label"><span class="red">*</span>开启状态</span>
          <el-select v-model="addData.isShow" placeholder="开启状态" style="width:120px;" @change="isShowChange">
            <el-option
            v-for="item in isShowOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[30, 40, 50, 60]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </div>
</template>
<script>
import _config from '@/services/config.js'
export default {
  data(){
    return {
      statusMapping: {
        '0': '否',
        '1': '是'
      },
      loading: false,
      tableData: [],
      query: {
        pageSize: 30,
        pageNum: 1
      },
      totalNum: 0,
      dialogTitle:'新增配置',
      dialogVisible: false,
      addData:{
        showArea:'',
        showAreaName:'',
        isShow: 0
      },
      isShowOption: [{
          value: 1,
          label:'是'
        },{
          value: 0,
          label:'否'
        }],
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val
      this.getList()
    },
    getList(){
      let params = {
        "pageNum": this.query.pageNum,
        "pageSize": this.query.pageSize
      }
      _config.getAppConfigShowList(params)
      .then(res => {
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    addConfig(){
        this.dialogVisible=true
        this.dialogTitle = '添加配置'
        this.addData ={
          id : '',
          showArea: '',
          showAreaName: '',
          isShow: 0
        }
    },
    modifyConfig(item){
      this.dialogVisible = true
      this.dialogTitle = '编辑'
      this.addData = {
        id : item.id,
        showArea: item.showArea,
        showAreaName: item.showAreaName,
        isShow: item.isShow
      }
    },
    isShowChange(val){
      console.log('val', this.addData.isShow)
    },
    confirmClick(){
      let params = this.addData
       if (this.dialogTitle === '添加配置') {
          _config.addConfig(params)
            .then(res => {
                console.log('res', res.data)
                if(res.data.code === 200){
                    this.$msg.success('添加成功')
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$msg.error(res.data.msg)
                }
            })
        } else {
          _config.updateConfig(params)
            .then(res => {
                console.log('res', res.data)
                if(res.data.code === 200){
                    this.$msg.success('修改成功')
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$msg.error(res.data.msg)
                }
            })
        } 

    }
  },
  created(){
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/variables.scss';
.wrap{
  .table{
    margin-top: 10px;
    margin-bottom: 25px;
  }
  .add-btn{
    width: 100px;
    background: $theme-color;
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
  }
   .red{
    color: #f00;
  }
   .dialog{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
}

</style>